<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <title>csgmap-psr-render-click</title>
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>
    <button type="button" onclick="testFun()" style="position: absolute;top: 10px;right: 10px;">切换</button>
    <button type="button" onclick="btmselect()" style="position: absolute;top: 50px;right: 10px;">选中</button>
    <button type="button" onclick="clearFun()" style="position: absolute;top: 100px;right: 10px;">清除</button>
    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/psr.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script>
        var amap = null;
        var psrmap = null;
        var init = false;
        var clickpsrs = null;
        map.Config.mineToInternetV31();

        map.Factory.create('mapui', {
            style: style,
            center: center,
            zoom: 17,
            strategy: ['mapboxgl', 'openlayers', 'leaflet'],
        }, (o) => {
            amap = o;
            init = true;
            var self = this;
            this.addPSR();
            filter = new psr.Display.Filter(o.pmap);
        });

        var count = 0;
        var lastfeature;

        function testFun() {
            if (!init) {
                console.log('please waite init');
                return;
            }
            //this.psrmap.highlightFeatures('#ff0000', { 110: ['357000000001201'],  510: ['357115502977101'] ,311: ['357115502252201'] , 335: ['357001294946401'], 321: ['357001295108701']}, '#C0C0C0');

            if (this.lastfeature) {
                this.psrmap.clearHighlight('click', lastfeature.id);
            }
            if (this.clickpsrs) {
                // if (!this.clickpsrs[count]) {
                //     count = 0;
                // }
                this.lastfeature = this.clickpsrs[count];
                this.psrmap.highlightClick(this.clickpsrs[count]);
                count++;
            }
        }

        function btmselect() {
            if (!init) {
                console.log('please waite init');
                return;
            }
            this.psrmap.clearHighlight();
            this.psrmap.highlightClick(this.lastfeature);
        }

        function clearFun() {
            if (!init) {
                console.log('please waite init');
                return;
            }
            this.psrmap.clearHighlight();
        }

        function addPSR() {
            var self = this;
            this.psrmap = new psr.PSRMap(this.amap.pmap);
            this.psrmap.on('feafureClicked', (e) => {
                self.clickpsrs = e;
                this.psrmap.highlightClick(e[count]);
            });

            this.psrmap.addPSR([], ['Microsoft YaHei UI Regular']);
        }
    </script>
</body>

</html>